import React from 'react';
import { Item } from './Item';

export class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
  }

  handleClick = () => {
    // 异步的
    // 第一次
    // this.setState({
    //   count: this.state.count + 1,
    // });
    // // 第二次
    // this.setState({
    //   count: this.state.count + 2,
    // });

    // 第一次，我想在之后的 setState 方法中拿到修改后的值
    this.setState({
      count: 2,
    });

    // // 第二次
    this.setState((state) => {
      // 此时拿到的值当前修改可以拿到的最新值：2
      console.log('回调函数拿到最新的值', state.count);
      return {
        // 在2的基础上加1
        count: state.count + 1,
      };
    });

    // // 第三次
    this.setState((state) => {
      // 此时拿到的值当前修改可以拿到的最新值：3
      // console.log(state.count);
      return {
        // 在3的基础上加1
        // 如果没有后续的修改，则 4 更新到页面上
        count: state.count + 1,
      };
    });

    console.log(this.state.count);
  };

  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}
